<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UCharts H5 Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .chart-container {
            margin: 20px 0;
            text-align: center;
        }
        canvas {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .controls {
            margin: 20px 0;
            text-align: center;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>UCharts H5 演示</h1>
        
        <div class="controls">
            <button onclick="createLineChart()">折线图</button>
            <button onclick="createColumnChart()">柱状图</button>
            <button onclick="createBarChart()">条形图</button>
            <button onclick="createAreaChart()">面积图</button>
            <button onclick="createMixChart()">混合图</button>
            <button onclick="createPieChart()">饼状图</button>
        </div>
        <div class="controls">
          <button onclick="createRadarChart()">雷达图</button>
          <button onclick="createWordChart()">词云图</button>
          <button onclick="createArcBarChart()">进度条</button>
          <button onclick="createGaugeBarChart()">仪表盘</button>
          <button onclick="createFunnelBarChart()">漏斗图</button>
          <button onclick="createCandleBarChart()">K线图</button>
      </div>
        <div class="controls">
          <button onclick="createHeatmapChart()">热力图</button>
      </div>
        
        <div class="chart-container">
            <canvas id="chart" width="800px" height="400px"></canvas>
        </div>
    </div>

    <!-- 引入构建后的uCharts库 -->
    <script src="./ucharts-v3.min.js"></script>
    <script language="JavaScript">
        function createLineChart() {
            const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "line",
                context: ctx,
                categories: ["2018","2019","2020","2021","2022","2023"],
                series: [
                    {
                        name: "成交量A",
                        data: [35,8,25,37,4,20]
                    },
                    {
                        name: "成交量B",
                        data: [70,40,65,100,44,68]
                    },
                    {
                        name: "成交量C",
                        data: [100,80,95,150,112,132]
                    }
                ],
                animation: true,
                background: "#FFFFFF",
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [15,10,0,15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            });
        }

        function createColumnChart() {
            const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "column",
                context: ctx,
                categories: ["2018","2019","2020","2021","2022","2023"],
                series: [
                  {
                    name: "目标值",
                    data: [35,36,31,33,13,34]
                  },
                  {
                    name: "完成量",
                    data: [18,27,21,24,6,28]
                  }
                ],
                animation: true,
                background: "#FFFFFF",
                color: ["#FAC858","#EE6666","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [15,15,0,5],
                enableScroll: false,
                legend: {},
                xAxis: {
                  disableGrid: true
                },
                yAxis: {
                  data: [
                    {
                      min: 0
                    }
                  ]
                },
                extra: {
                  column: {
                    type: "group",
                    width: 30,
                    activeBgColor: "#000000",
                    activeBgOpacity: 0.08,
                    linearType: "custom",
                    seriesGap: 5,
                    linearOpacity: 0.5,
                    barBorderCircle: true,
                    customColor: [
                      "#FA7D8D",
                      "#EB88E2"
                    ]
                  }
                }
            });
        }

        function createBarChart() {
            const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "bar",
                context: ctx,
                categories: ["2018","2019","2020","2021","2022","2023"],
                series: [
                  {
                    name: "目标值",
                    data: [35,36,31,33,13,34]
                  },
                  {
                    name: "完成量",
                    data: [18,27,21,24,6,28]
                  }
                ],
                animation: true,
                background: "#FFFFFF",
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [15,30,0,5],
                enableScroll: false,
                legend: {},
                xAxis: {
                  boundaryGap: "justify",
                  disableGrid: false,
                  min: 0,
                  axisLine: false,
                  max: 40
                },
                yAxis: {},
                extra: {
                  bar: {
                    type: "group",
                    width: 30,
                    meterBorde: 1,
                    meterFillColor: "#FFFFFF",
                    activeBgColor: "#000000",
                    activeBgOpacity: 0.08,
                    linearType: "custom",
                    barBorderCircle: true,
                    seriesGap: 2,
                    categoryGap: 2
                  }
                }
            });
        }

        function createAreaChart() {
            const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "area",
                context: ctx,
                categories: ["2018","2019","2020","2021","2022","2023"],
                series: [
                    {
                        name: "成交量A",
                        data: [35,8,25,37,4,20]
                    },
                    {
                        name: "成交量B",
                        data: [70,40,65,100,44,68]
                    },
                    {
                        name: "成交量C",
                        data: [100,80,95,150,112,132]
                    }
                ],
                animation: true,
                background: "#FFFFFF",
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [15,15,0,15],
                enableScroll: false,
                legend: {},
                xAxis: {
                  disableGrid: true
                },
                yAxis: {
                  gridType: "dash",
                  dashLength: 2
                },
                extra: {
                  area: {
                    type: "curve",
                    opacity: 0.2,
                    addLine: true,
                    width: 2,
                    gradient: true,
                    activeType: "hollow"
                  }
                }
            })
        }

        function createMixChart() {
            const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
              type: "mix",
              context: ctx,
              categories: ["2018","2019","2020","2021","2022","2023"],
              series: [
                {
                  name: "曲面",
                  type: "area",
                  style: "curve",
                  data: [70,50,85,130,64,88]
                },
                {
                  name: "柱1",
                  index: 1,
                  type: "column",
                  data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
                },
                {
                  name: "柱2",
                  index: 1,
                  type: "column",
                  data: [50,20,75,60,34,38]
                },
                {
                  name: "曲线",
                  type: "line",
                  style: "curve",
                  color: "#1890ff",
                  disableLegend: true,
                  data: [70,50,85,130,64,88]
                },
                {
                  name: "折线",
                  type: "line",
                  color: "#2fc25b",
                  data: [120,140,105,170,95,160]
                },
                {
                  name: "点",
                  index: 2,
                  type: "point",
                  color: "#f04864",
                  data: [100,80,125,150,112,132]
                }
              ],
              animation: true,
              background: "#FFFFFF",
              color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
              padding: [15,15,0,15],
              enableScroll: false,
              legend: {},
              xAxis: {
                disableGrid: true,
                title: "单位：年"
              },
              yAxis: {
                disabled: false,
                disableGrid: false,
                splitNumber: 5,
                gridType: "dash",
                dashLength: 4,
                gridColor: "#CCCCCC",
                padding: 10,
                showTitle: true,
                data: [
                  {
                    position: "left",
                    title: "折线"
                  },
                  {
                    position: "right",
                    min: 0,
                    max: 200,
                    title: "柱状图",
                    textAlign: "left"
                  },
                  {
                    position: "right",
                    min: 0,
                    max: 200,
                    title: "点",
                    textAlign: "left"
                  }
                ]
              },
              extra: {
                mix: {
                  column: {
                    width: 20
                  }
                }
              }
            });
        }

        function createPieChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "pie",
                context: ctx,
                series: [{
                  data: [
                    {"name":"一班","value":50},
                    {"name":"二班","value":30},
                    {"name":"三班","value":20},
                    {"name":"四班","value":18},
                    {"name":"五班","value":8}
                  ]
                }],
                padding: [5,5,5,5],
                extra: {
                  pie: {
                    activeOpacity: 0.5,
                    activeRadius: 10,
                    offsetAngle: 0,
                    labelWidth: 15,
                    border: true,
                    borderWidth: 3,
                    borderColor: "#FFFFFF",
                    linearType: "custom"
                  }
                }
            });
        }

        function createRadarChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "radar",
                context: ctx,
                categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
                series: [
                  {
                    name: "成交量1",
                    data: [90,110,165,195,187,172]
                  },
                  {
                    name: "成交量2",
                    data: [190,210,105,35,27,102]
                  }
                ],
                padding: [5,5,5,5],
                dataLabel: false,
                legend: {
                  show: true,
                  position: "right",
                  lineHeight: 25
                },
                extra: {
                  radar: {
                    gridType: "circle",
                    gridColor: "#CCCCCC",
                    gridCount: 3,
                    opacity: 0.2,
                    max: 200,
                    labelShow: true
                  }
                }
            });
        }

        function createWordChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "word",
                context: ctx,
                series: [
                  { name: "跨全端图表", textSize: 25 },
                  { name: "微信小程序", textSize: 20 },
                  { name: "支付宝小程序", textSize: 20 },
                  { name: "百度小程序", textSize: 20 },
                  { name: "QQ小程序", textSize: 20 },
                  { name: "头条小程序", textSize: 20 },
                  { name: "抖音小程序", textSize: 20 },
                  { name: "360小程序", textSize: 20 },
                  { name: "跨全端", textSize: 10 },
                  { name: "跨全端", textSize: 12 },
                  { name: "跨全端", textSize: 10 },
                  { name: "跨全端", textSize: 12 },
                  { name: "跨全端", textSize: 10 },
                  { name: "跨全端", textSize: 12 },
                  { name: "跨全端", textSize: 10 },
                  { name: "跨全端", textSize: 12 }
                ],
                extra: {
                  word: {
                    type: "vertical"
                  }
                }
            });
        }

        function createArcBarChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "arcbar",
                context: ctx,
                series: [
                  {
                    name: "正确率",
                    color: "#2fc25b",
                    data: 0.8
                  }
                ],
                title: {
                  value: "80%",
                  fontSize: 35,
                  color: "#2fc25b"
                },
                subtitle: {
                  value: "正确率",
                  fontSize: 25,
                  color: "#666666"
                },
                extra: {
                  arcbar: {
                    type: "default",
                    width: 12,
                    backgroundColor: "#E9E9E9",
                    startAngle: 0.75,
                    endAngle: 0.25,
                    gap: 2,
                    linearType: "custom"
                  }
                }
            });
        }

        function createGaugeBarChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "gauge",
                context: ctx,
                series: [{ name: "完成率", data: 0.66 }],
                title: {
                  value: "66Km/H",
                  fontSize: 25,
                  color: "#2fc25b",
                  offsetY: 0
                },
                subtitle: {
                  value: "实时速度",
                  fontSize: 15,
                  color: "#1890ff",
                  offsetY: 0
                },
                extra: {
                  gauge: {
                    type: "progress",
                    width: 20,
                    startAngle: 0.75,
                    endAngle: 0.25,
                    splitLine: {
                      fixRadius: -10,
                      splitNumber: 10,
                      width: 15,
                      color: "#FFFFFF",
                      childNumber: 5
                    }
                  }
                }
            });
        }

        function createFunnelBarChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "funnel",
                context: ctx,
                series: [
                  {
                    data: [
                      {"name":"一班","centerText":"50","value":50},
                      {"name":"二班","centerText":"30","value":30},
                      {"name":"三班","centerText":"20","value":20},
                      {"name":"四班","centerText":"18","value":18},
                      {"name":"五班","centerText":"8","value":8}
                    ]
                  }
                ],
                padding: [15,15,0,15],
                extra: {
                  funnel: {
                    activeOpacity: 0.3,
                    activeWidth: 10,
                    border: true,
                    borderWidth: 2,
                    borderColor: "#FFFFFF",
                    fillOpacity: 1,
                    labelAlign: "right"
                  }
                }
            });
        }

        function createCandleBarChart() {
          const canvas = document.getElementById('chart');
            const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));
            const chart = new UCharts({
                type: "candle",
                context: ctx,
                categories: ["2022/1/24","2022/1/25","2022/1/28","2022/1/29","2022/1/30","2022/1/31","2022/2/1","2022/2/4","2022/2/5","2022/2/6","2022/2/7","2022/2/8","2022/2/18","2022/2/19","2022/2/20","2022/2/21","2022/2/22","2022/2/25","2022/2/26","2022/2/27","2022/2/28","2022/3/1","2022/3/4","2022/3/5","2022/3/6","2022/3/7","2022/3/8","2022/3/11","2022/3/12","2022/3/13","2022/3/14","2022/3/15","2022/3/18","2022/3/19","2022/3/20","2022/3/21","2022/3/22","2022/3/25","2022/3/26","2022/3/27","2022/3/28","2022/3/29","2022/4/1","2022/4/2","2022/4/3","2022/4/8","2022/4/9","2022/4/10","2022/4/11","2022/4/12","2022/4/15","2022/4/16","2022/4/17","2022/4/18","2022/4/19","2022/4/22","2022/4/23","2022/4/24","2022/4/25","2022/4/26","2022/5/2","2022/5/3","2022/5/6","2022/5/7","2022/5/8","2022/5/9","2022/5/10","2022/5/13","2022/5/14","2022/5/15","2022/5/16","2022/5/17","2022/5/20","2022/5/21","2022/5/22","2022/5/23","2022/5/24","2022/5/27","2022/5/28","2022/5/29","2022/5/30","2022/5/31","2022/6/3","2022/6/4","2022/6/5","2022/6/6","2022/6/7","2022/6/13"],
                series: [
                  {
                    name: "上证指数",
                    data: [[2320.26,2302.6,2287.3,2362.94],[2300,2291.3,2288.26,2308.38],[2295.35,2346.5,2295.35,2346.92],[2347.22,2358.98,2337.35,2363.8],[2360.75,2382.48,2347.89,2383.76],[2383.43,2385.42,2371.23,2391.82],[2377.41,2419.02,2369.57,2421.15],[2425.92,2428.15,2417.58,2440.38],[2411,2433.13,2403.3,2437.42],[2432.68,2434.48,2427.7,2441.73],[2430.69,2418.53,2394.22,2433.89],[2416.62,2432.4,2414.4,2443.03],[2441.91,2421.56,2415.43,2444.8],[2420.26,2382.91,2373.53,2427.07],[2383.49,2397.18,2370.61,2397.94],[2378.82,2325.95,2309.17,2378.82],[2322.94,2314.16,2308.76,2330.88],[2320.62,2325.82,2315.01,2338.78],[2313.74,2293.34,2289.89,2340.71],[2297.77,2313.22,2292.03,2324.63],[2322.32,2365.59,2308.92,2366.16],[2364.54,2359.51,2330.86,2369.65],[2332.08,2273.4,2259.25,2333.54],[2274.81,2326.31,2270.1,2328.14],[2333.61,2347.18,2321.6,2351.44],[2340.44,2324.29,2304.27,2352.02],[2326.42,2318.61,2314.59,2333.67],[2314.68,2310.59,2296.58,2320.96],[2309.16,2286.6,2264.83,2333.29],[2282.17,2263.97,2253.25,2286.33],[2255.77,2270.28,2253.31,2276.22],[2269.31,2278.4,2250,2312.08],[2267.29,2240.02,2239.21,2276.05],[2244.26,2257.43,2232.02,2261.31],[2257.74,2317.37,2257.42,2317.86],[2318.21,2324.24,2311.6,2330.81],[2321.4,2328.28,2314.97,2332],[2334.74,2326.72,2319.91,2344.89],[2318.58,2297.67,2281.12,2319.99],[2299.38,2301.26,2289,2323.48],[2273.55,2236.3,2232.91,2273.55],[2238.49,2236.62,2228.81,2246.87],[2229.46,2234.4,2227.31,2243.95],[2234.9,2227.74,2220.44,2253.42],[2232.69,2225.29,2217.25,2241.34],[2196.24,2211.59,2180.67,2212.59],[2215.47,2225.77,2215.47,2234.73],[2224.93,2226.13,2212.56,2233.04],[2236.98,2219.55,2217.26,2242.48],[2218.09,2206.78,2204.44,2226.26],[2199.91,2181.94,2177.39,2204.99],[2169.63,2194.85,2165.78,2196.43],[2195.03,2193.8,2178.47,2197.51],[2181.82,2197.6,2175.44,2206.03],[2201.12,2244.64,2200.58,2250.11],[2236.4,2242.17,2232.26,2245.12],[2242.62,2184.54,2182.81,2242.62],[2187.35,2218.32,2184.11,2226.12],[2213.19,2199.31,2191.85,2224.63],[2203.89,2177.91,2173.86,2210.58],[2170.78,2174.12,2161.14,2179.65],[2179.05,2205.5,2179.05,2222.81],[2212.5,2231.17,2212.5,2236.07],[2227.86,2235.57,2219.44,2240.26],[2242.39,2246.3,2235.42,2255.21],[2246.96,2232.97,2221.38,2247.86],[2228.82,2246.83,2225.81,2247.67],[2247.68,2241.92,2231.36,2250.85],[2238.9,2217.01,2205.87,2239.93],[2217.09,2224.8,2213.58,2225.19],[2221.34,2251.81,2210.77,2252.87],[2249.81,2282.87,2248.41,2288.09],[2286.33,2299.99,2281.9,2309.39],[2297.11,2305.11,2290.12,2305.3],[2303.75,2302.4,2292.43,2314.18],[2293.81,2275.67,2274.1,2304.95],[2281.45,2288.53,2270.25,2292.59],[2286.66,2293.08,2283.94,2301.7],[2293.4,2321.32,2281.47,2322.1],[2323.54,2324.02,2321.17,2334.33],[2316.25,2317.75,2310.49,2325.72],[2320.74,2300.59,2299.37,2325.53],[2300.21,2299.25,2294.11,2313.43],[2297.1,2272.42,2264.76,2297.1],[2270.71,2270.93,2260.87,2276.86],[2264.43,2242.11,2240.07,2266.69],[2242.26,2210.9,2205.07,2250.63],[2190.1,2148.35,2126.22,2190.1]]
                  }
                ],
                padding: [15,15,0,15],
                dataLabel: false,
                enableScroll: true,
                enableMarkLine: true,
                xAxis: {
                  labelCount: 4,
                  itemCount: 40,
                  disableGrid: true,
                  gridColor: "#CCCCCC",
                  gridType: "solid",
                  dashLength: 4,
                  scrollShow: true,
                  scrollAlign: "left",
                  scrollColor: "#A6A6A6",
                  scrollBackgroundColor: "#EFEBEF"
                },
                yAxis: {},
                extra: {
                  candle: {
                    color: {
                      upLine: "#f04864",
                      upFill: "#f04864",
                      downLine: "#2fc25b",
                      downFill: "#2fc25b"
                    },
                    average: {
                      show: true,
                      name: ["MA5", "MA10", "MA30"],
                      day: [5, 10, 20],
                      color: ["#1890ff", "#2fc25b", "#facc14"]
                    }
                  },
                  markLine: {
                    type: "dash",
                    dashLength: 5,
                    data: [
                      {
                        value: 2150,
                        lineColor: "#f04864",
                        showLabel: true
                      },
                      {
                        value: 2350,
                        lineColor: "#f04864",
                        showLabel: true
                      }
                    ]
                  },
                  tooltip: {
                    showCategory: true
                  }
                }
            });
        }

        function createHeatmapChart() {
          const canvas = document.getElementById('chart');
          const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));

          // 生成随机热力图数据
          function generateHeatmapData() {
            const year = new Date().getFullYear();
            const startDate = new Date(year, 0, 1);
            const endDate = new Date(year, 11, 31);
            const data = [];
            for (let date = new Date(startDate); date <= endDate; date.setDate(date.getDate() + 1)) {
                const dayOfWeek = date.getDay();
                let value = 0;
                
                // 工作日更可能有数据，周末概率较低
                if (dayOfWeek >= 1 && dayOfWeek <= 5) {
                    // 工作日：70%概率有数据，1-15范围
                    value = Math.random() < 0.7 ? Math.floor(Math.random() * 15) + 1 : 0;
                } else {
                    // 周末：30%概率有数据，1-8范围
                    value = Math.random() < 0.3 ? Math.floor(Math.random() * 8) + 1 : 0;
                }
                
                data.push({
                    date: new Date(date).toLocaleDateString('en-CA'), // YYYY-MM-DD 格式
                    value: value
                });
            }
            
            return data;
          }
          
          const chart = new UCharts({
            type: "heatmap",
            context: ctx,
            series: [{
              data: generateHeatmapData(),
            }],
            color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127', '#0a3d18'],
            extra: {
              heatmap: {
                cellGap: 3,
                cellRadius: 2,
                dayLabels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                legend: {
                  show: true,
                  position: 'right',
                  labelLess: 'Less',
                  labelMore: 'More',
                  cellSize: 10,
                  cellGap: 4,
                  cellRadius: 2,
                  textGap: 8,
                  colorLevels: 5
                }
              }
            }
          });
        }

        // 页面加载完成后默认显示折线图
        window.onload = function() {
            createLineChart();
        };
    </script>
</body>
</html> 